<!-- 登录页面 -->
<template>
    <div class="container">
        <div class="logo">
        <img
            alt="logo"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
        />
        </div>
        <div class="banner">
            <div class="banner-inner">
            <a-carousel class="carousel" animation-name="fade">
                <a-carousel-item v-for="item in carouselItem" :key="item.slogan">
                <div :key="item.slogan" class="carousel-item">
                    <div class="carousel-title">{{ item.slogan }}</div>
                    <div class="carousel-sub-title">{{ item.subSlogan }}</div>
                    <img class="carousel-image" :src="item.image" />
                </div>
                </a-carousel-item>
            </a-carousel>
            </div>
        </div>
        <div class="content">
            <div class="content-inner">
                <div class="login-form-wrapper">
                    <div class="login-form-title">登录数闻CDP</div>
                    <div class="login-form-error-msg"></div>
                    <a-form
                    ref="login_from" 
                    :rules="login_from_rules" 
                    :model="login_from_data"
                    class="login-form"
                    layout="vertical"
                    >
                    <a-form-item
                        field="username"
                        :rules="[{ required: true, message: '用户名不能为空' }]"
                        :validate-trigger="['change', 'blur']"
                        hide-label
                    >
                        <a-input
                        v-model="login_from_data.username" placeholder="请输入用户名"
                        >
                        <template #prefix>
                            <icon-user />
                        </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item
                        field="password"
                        :rules="[{ required: true, message: '密码不能为空' }]"
                        :validate-trigger="['change', 'blur']"
                        hide-label
                    >
                        <a-input-password
                        v-model="login_from_data.password" placeholder="请输入登录密码"
                        allow-clear
                        >
                        <template #prefix>
                            <icon-lock />
                        </template>
                        </a-input-password>
                    </a-form-item>
                    <a-space :size="16" direction="vertical">
                        <div class="login-form-password-actions">
                        <a-checkbox
                            checked="rememberPassword"
                            :model-value="rememberPassword">
                        记住密码
                        </a-checkbox>
                        <a-link>忘记密码</a-link>
                        </div>
                        <a-button type="primary" long @click="SubmitLoginFunc" v-on:keyup.enter="SubmitLoginFunc">登录</a-button>
                        <a-button type="text" long class="login-form-register-btn">
                            注册账号
                        </a-button>
                    </a-space>
                    </a-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import { useRouter } from "vue-router";
import { login } from "_apis/login";
import type { Router } from "vue-router";
import type { LoginRequestData } from "_types/login";
import overviewImage from '@/assets/images/overview1.png';
import eventImage from '@/assets/images/event1.png';
import customImage from '@/assets/images/customEvent.png';


const carouselItem = computed(() => [
    {
        slogan: '数闻CDP',
        subSlogan: '数据概览',
        image: overviewImage,
    },{
        slogan: '数闻CDP',
        subSlogan: '事件分析',
        image: eventImage,
    },{
        slogan: '数闻CDP',
        subSlogan: '自定义事件',
        image: customImage,
    },
]);
// 路由实例
const router: Router = useRouter()

const rememberPassword = true;

// 登录所需参数
const login_from_data: LoginRequestData = reactive({
    username: "",
    password: "",
    captcha: "",
    uuid: "",
});
// from ref
const login_from = ref();
// 校验登录数据
const login_from_rules: FromRules = {
    username: [
        {
            required: true,
            message: "请输入用户名"
        }
    ],
    password: [
        {
            required: true,
            message: "请输入登录密码"
        }
    ],
};
// 登录
const SubmitLoginFunc = () => {
    console.log('start');
    login_from.value.validate((validate: undefined | FromRules) => {
        if (!validate) {
            login(login_from_data).then(res => {
                sessionStorage.setItem('ut', res.token)
                sessionStorage.setItem('userId', res.userId + "")
                router.push({
                    path: "/overView/1"
                });
                localStorage.setItem("username", login_from_data.username);
            })
        }
    });
};
</script>

<style lang='less' scoped>
.container {
    display: flex;
    height: 100vh;

    .banner {
      width: 550px;
      background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
    }

    .content {
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      padding-bottom: 40px;
    }

    .footer {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
    }
  }

  .logo {
    position: fixed;
    top: 24px;
    left: 22px;
    z-index: 1;
    display: inline-flex;
    align-items: center;

    &-text {
      margin-right: 4px;
      margin-left: 4px;
      color: var(--color-fill-1);
      font-size: 20px;
    }
  }

.banner {
    display: flex;
    align-items: center;
    justify-content: center;

    &-inner {
      flex: 1;
      height: 100%;
    }
  }

  .carousel {
    height: 100%;

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    &-title {
      color: var(--color-fill-1);
      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
    }

    &-sub-title {
      margin-top: 8px;
      color: var(--color-text-3);
      font-size: 14px;
      line-height: 22px;
    }

    &-image {
      width: 320px;
      margin-top: 30px;
    }
  }

  .login-form {
    &-wrapper {
      width: 320px;
    }

    &-title {
      color: var(--color-text-1);
      font-weight: 500;
      font-size: 24px;
      line-height: 32px;
    }

    &-sub-title {
      color: var(--color-text-3);
      font-size: 16px;
      line-height: 24px;
    }

    &-error-msg {
      height: 32px;
      color: rgb(var(--red-6));
      line-height: 32px;
    }

    &-password-actions {
      display: flex;
      justify-content: space-between;
    }

    &-register-btn {
      color: var(--color-text-3) !important;
    }
  }

.login-container {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(239, 240, 238);

    &>div.content {
        height: auto;
        width: 350px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 15px;
        border-radius: 4px;

        &>.header {
            height: 64px;
            margin-bottom: 15px;
            background-image: url("@/assets/logo.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            // background-position: 0 12px;
            background-position: 0 0;
        }
    }
}
</style>
